$(function () {
  /* 业务1. 获取页面传递过来的参数文章id */
  // 1.1 获取地址栏中的查询参数部分
  const search = location.search
  // console.log(search)   // 检查是否获取成功
  // 1.2 把字符串转换成查询参数对象
  const seachObj = new URLSearchParams(search)
  // 1.3 从查询参数对象中获取 id
  const id = seachObj.get('id')
  // console.log(id) // 检查id是否正确

  /* 获取文章分类 */
  $.ajax({
    method: 'GET',
    url: BigNew.category_list,
    success: (res) => {
      // console.log(res.data)
      const htmlStr = template('cateItem', { list: res.data })
      $('.category').html(htmlStr)
    },
  })

  /* 业务2：根据id获取文章信息 */
  $.ajax({
    method: 'GET',
    url: BigNew.article_search,
    data: { id },
    success: (res) => {
      // console.log(res.data)
      // 从 res 中解构出页面渲染所需的数据
      const { author, categoryId, content, cover, date, id, state, title } = res.data
      // console.log({ author, categoryId, content, cover, date, id, state, title })
      $('[name="title"]').val(title) // 标题
      $('.article_cover').prop('src', cover) // 封面
      // 🚩 给 select 下拉框设置 value 值，会改变下拉框的选中状态
      $('[name="categoryId"]').val(categoryId) // 文章分类
      $('[name="date"]').val(date)
      // tinymce 编辑器也 textarea 的表单值初始化
      $('[name="content"]').val(content)
      // 🧨 注意：由于富文本编辑器加载需要时间，所以给富文本编辑器设置内容的代码要延后一些时间执行
      // setTimeout(() => {
      //   // 把后端返回的内容，设置到富文本编辑器中
      //   tinymce.activeEditor.setContent(content)
      // }, 1500)
    },
  })

  // 业务3：加载日期插件 - 点击日期输入框后就会弹出日期插件
  jeDate('#date', {
    // 事件触发 trigger
    trigger: 'click',
    // 日期格式
    format: 'YYYY-MM-DD',
    // 主题
    theme: { bgcolor: '#569CD6', pnColor: '#9CDCFE' },
    // 是否设置初始值(现在的时间)
    isinitVal: false,
  })

  /* 业务4：富文本插件 */
  tinymce.init({
    selector: '#content',
    height: '350px',
    language: 'zh_CN',
    directionality: 'ltl',
    browser_spellcheck: true,
    contextmenu: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table contextmenu paste imagetools wordcount',
      'code',
    ],
    toolbar:
      'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
  })

  /* 业务5：图片预览功能 */
  $('[name="cover"]').change(function () {
    // 获取文件对象
    const fileObj = $('[name="cover"]').get(0).files[0]
    // console.log(fileObj)
    // 把文件对象转换成 url 路径
    const url = URL.createObjectURL(fileObj)
    // console.log(url)
    // 把 url 路径替换到 src 中实现预览
    $('.article_cover').prop('src', url)
  })

  /* 业务6：修改按钮和存为草稿按钮的点击事件 */
  $('[type="submit"]').click(function (e) {
    // 记得阻止默认行为
    e.preventDefault()
    // 获取按钮上的自定义属性 - 已发布 / 草稿
    const state = $(this).attr('data-state')
    // console.log(state)
    // 把原生的 form 表单作为 FormData 的参数，快速获取表单值
    const fd = new FormData(document.querySelector('#form'))
    // 添加 id 参数，因为 form 表单中没有，但接口需要该参数
    fd.append('id', id)
    // 添加 state 文章状态参数，因为 form 表单中没有，但接口需要该参数
    fd.append('state', state)
    // 🧨 获取富文本编辑器的最新内容，改方法由插件提供
    const content = tinymce.activeEditor.getContent()
    // console.log(content)
    // 🧨 把 FormData 中错误的 content 值，通过 set 修改成富文本获取到的最新内容
    fd.set('content', content)
    // 打印 FormData 对象的键名称和值，检查参数是否正确
    fd.forEach((value, key) => {
      console.log(key, value)
    })
    // 🧨 注意检查：接口文档要求有 7 个参数，记得检查，一个都不能少
    // 发送 ajax 请求
    $.ajax({
      method: 'POST',
      url: BigNew.article_edit,
      // 由于涉及到了 file 文件，所以只能用 FormData 作为请求参数
      data: fd,
      contentType: false,
      processData: false,
      success: (res) => {
        if (res.code === 200) {
          alert(res.msg)
          location.href = './article_list.html'
        }
      },
    })
  })
})
